<template>
  <!-- 菜单导航栏 -->
  <view
    class="life_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 顶部导航栏 -->
    <top-navigation-bar
      :is-scroll-color="false"
      :roll-distance="rollDistance"
    />

    <!-- 轮播图 -->
    <view style="top: 0; position: sticky; z-index: 80" id="carousel">
      <carousel
        :height="carouselHeight"
        :is-auto="false"
        :list-data="carouselList"
      />
    </view>

    <!-- 菜单导航栏 -->
    <menu-navigation-bar
      id="menu"
      :is-sticky="true"
      :top-sticky="carouselHeight"
      @on-selected="selectedMenu"
      :index="menuIndex"
      :is-dot="true"
      :menu-list="menuList.map((s) => s.categoryMsg)"
    />

    <!-- 主体内容 -->
    <view class="content">
      <!-- 数据列表内容 -->
      <carousel-goods
        :data="menuList"
        :current="menuIndex"
        :is-refresh="refresh.isRefresh.value"
        :height="carouselHeight + 2 * (menuHeight + tabBarHeight + loadHeight)"
        @on-change="onChangeSwiper"
        @on-refresh-end="refresh.refreshEnd(500)"
      ></carousel-goods>
    </view>
  </view>

  <!-- 下拉刷新 -->
  <pull-down-refresh
    :opacity="refresh.moveBottom.value / 3"
    :enble-anim="refresh.isRefresh.value"
  />

  <!-- 自定义tabBar导航栏 -->
  <tabBar id="tabBar" />
</template>

<script lang="ts" setup>
import { ReqSelectAllCategory } from '@/api/category'
import carouselGoods from '@/components/layout/carousel_layout/carousel-goods.vue'
import menuNavigationBar from '@/components/layout/menu_navigation_bar/menu-navigation-bar.vue'
import carousel from '@/components/layout/carousel/carousel.vue'
import topNavigationBar from '@/components/business/top_navigation_bar/top-navigation-bar.vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { Carousel, Category } from '@/config/data/data'
import { refreshHandler } from '@/components/common/pull_down_refresh/index'

//当前页面滚动距离
const rollDistance = ref(0)

//轮播图高度、单位rpx
const carouselHeight = ref(300)

//菜单高度
const menuHeight = ref(0)

//底部加载状态高度
const loadHeight = ref(0)

//底部tabBar导航栏高度
const tabBarHeight = ref(0)

//当前选中菜单的下标
const menuIndex = ref(0)

// 轮播图数据列表
const carouselList = ref<Carousel[]>([
  {
    img: 'https://www.lyzhnb.top/waxl/classify/%E4%BA%BA%E5%A3%B0.jpg',
    path: '',
    typed: 'image',
  },
  {
    img: 'https://www.lyzhnb.top/waxl/classify/%E5%BF%83%E6%83%85.jpg',
    path: '',
    typed: 'image',
  },
  {
    img: 'https://www.lyzhnb.top/waxl/classify/%E6%B5%B7%E6%B5%AA.jpg',
    path: '',
    typed: 'image',
  },
])

//菜单列表
const menuList = ref<Category[]>([])

/**
 * 监听菜单选中变化事件
 * @param index 选中的菜单下标
 */
const selectedMenu = (index: number) => {
  //更新选中的菜单下标
  menuIndex.value = index
}

//监听内容滑动到下一分类事件
const onChangeSwiper = (index: number) => {
  menuIndex.value = index
}

//获取指定盒子的高度
const getSpecifiedBoxuHeight = () => {
  //菜单导航栏
  uni
    .createSelectorQuery()
    .select('#menu')
    .boundingClientRect((e: any) => {
      menuHeight.value = parseInt(e.height)
    })
    .exec()

  //底部tabBar导航栏
  uni
    .createSelectorQuery()
    .select('#tabBar')
    .boundingClientRect((e: any) => {
      tabBarHeight.value = e.height
    })
    .exec()
}

//下拉刷新控制函数
const refresh = refreshHandler(300)

//初始化数据
const init = () => {
  ReqSelectAllCategory({ msg: 'life' }).then((res) => {
    if (res.code == 200 && res.data) {
      menuList.value = res.data
    }
  })
}

//页面加载
onLoad(() => {
  //获取指定盒子的高度
  getSpecifiedBoxuHeight()
  //初始化数据
  init()
})

//监听页面滚动
onPageScroll((e: any) => {
  //最大滚动距离不为40
  if (e.scrollTop < 40) {
    rollDistance.value = parseInt(e.scrollTop)
  }
})
</script>

<style scoped lang="scss">
.life_box {
  background-color: $uni-bg-color-grey;

  .content {
    width: calc(100% - 60rpx);
    padding: 0 30rpx;
    background-color: $uni-bg-color-grey;

    .big_list {
      width: 100%;
      background-color: $uni-bg-color;
      height: fit-content;

      .list {
        display: inline-flex;
        width: calc(100% - 40rpx);
        padding: 0 20rpx 20rpx;
        background-color: $uni-bg-color;

        ::-webkit-scrollbar {
          width: 0 !important;
          background: transparent !important;
        }

        .item {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: 30rpx;
          row-gap: 30rpx;
          white-space: normal;
        }
      }
    }
  }
}
</style>
